<!-- Like猜你喜欢组件 -->
<template>
  <div class="like_container">
      <div>
          <span style="color:orange">❤</span>
          猜你喜换
      </div>
      <ul >
          <li class="like_item border-bottom">
              <!-- 图片区 -->
              <div class="like_img">
                  <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.pconline.com.cn%2Fimages%2Fupload%2Fupc%2Ftx%2Fphotoblog%2F1312%2F29%2Fc3%2F30107830_1388306674126.jpg&refer=http%3A%2F%2Fimg.pconline.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639668816&t=0bd6f2b4ac0594705b76eb569ee76026" alt="">
              </div>
              <!-- 文字区 -->
              <div class="like_text">
                  <div class="like_title">
                      金海湖风景区
                  </div>
                  <div class="like_message">
                      1341条评论
                  </div>
                  <div class="like_map">
                      <span class="like_mark">￥<b>18.8</b></span>起
                      <span>平谷区</span>
                  </div>
              </div>
          </li>
          <li class="like_item border-bottom">
              <!-- 图片区 -->
              <div class="like_img">
                  <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.pconline.com.cn%2Fimages%2Fupload%2Fupc%2Ftx%2Fphotoblog%2F1312%2F29%2Fc3%2F30107830_1388306674126.jpg&refer=http%3A%2F%2Fimg.pconline.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639668816&t=0bd6f2b4ac0594705b76eb569ee76026" alt="">
              </div>
              <!-- 文字区 -->
              <div class="like_text">
                  <div class="like_title">
                      金海湖风景区
                  </div>
                  <div class="like_message">
                      1341条评论
                  </div>
                  <div class="like_map">
                      <span class="like_mark">￥<b>18.8</b></span>起
                      <span>平谷区</span>
                  </div>
              </div>
          </li>
          <li class="like_item border-bottom">
              <!-- 图片区 -->
              <div class="like_img">
                  <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.pconline.com.cn%2Fimages%2Fupload%2Fupc%2Ftx%2Fphotoblog%2F1312%2F29%2Fc3%2F30107830_1388306674126.jpg&refer=http%3A%2F%2Fimg.pconline.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639668816&t=0bd6f2b4ac0594705b76eb569ee76026" alt="">
              </div>
              <!-- 文字区 -->
              <div class="like_text">
                  <div class="like_title">
                      金海湖风景区
                  </div>
                  <div class="like_message">
                      1341条评论
                  </div>
                  <div class="like_map">
                      <span class="like_mark">￥<b>18.8</b></span>起
                      <span>平谷区</span>
                  </div>
              </div>
          </li>
          <li class="like_item border-bottom">
              <!-- 图片区 -->
              <div class="like_img">
                  <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.pconline.com.cn%2Fimages%2Fupload%2Fupc%2Ftx%2Fphotoblog%2F1312%2F29%2Fc3%2F30107830_1388306674126.jpg&refer=http%3A%2F%2Fimg.pconline.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639668816&t=0bd6f2b4ac0594705b76eb569ee76026" alt="">
              </div>
              <!-- 文字区 -->
              <div class="like_text">
                  <div class="like_title">
                      金海湖风景区
                  </div>
                  <div class="like_message">
                      1341条评论
                  </div>
                  <div class="like_map">
                      <span class="like_mark">￥<b>18.8</b></span>起
                      <span>平谷区</span>
                  </div>
              </div>
          </li>
          <li class="like_item border-bottom">
              <!-- 图片区 -->
              <div class="like_img">
                  <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.pconline.com.cn%2Fimages%2Fupload%2Fupc%2Ftx%2Fphotoblog%2F1312%2F29%2Fc3%2F30107830_1388306674126.jpg&refer=http%3A%2F%2Fimg.pconline.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639668816&t=0bd6f2b4ac0594705b76eb569ee76026" alt="">
              </div>
              <!-- 文字区 -->
              <div class="like_text">
                  <div class="like_title">
                      金海湖风景区
                  </div>
                  <div class="like_message">
                      1341条评论
                  </div>
                  <div class="like_map">
                      <span class="like_mark">￥<b>18.8</b></span>起
                      <span>平谷区</span>
                  </div>
              </div>
          </li>
          <li class="like_item border-bottom">
              <!-- 图片区 -->
              <div class="like_img">
                  <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.pconline.com.cn%2Fimages%2Fupload%2Fupc%2Ftx%2Fphotoblog%2F1312%2F29%2Fc3%2F30107830_1388306674126.jpg&refer=http%3A%2F%2Fimg.pconline.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639668816&t=0bd6f2b4ac0594705b76eb569ee76026" alt="">
              </div>
              <!-- 文字区 -->
              <div class="like_text">
                  <div class="like_title">
                      金海湖风景区
                  </div>
                  <div class="like_message">
                      1341条评论
                  </div>
                  <div class="like_map">
                      <span class="like_mark">￥<b>18.8</b></span>起
                      <span>平谷区</span>
                  </div>
              </div>
          </li>
          <li class="like_item border-bottom">
              <!-- 图片区 -->
              <div class="like_img">
                  <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.pconline.com.cn%2Fimages%2Fupload%2Fupc%2Ftx%2Fphotoblog%2F1312%2F29%2Fc3%2F30107830_1388306674126.jpg&refer=http%3A%2F%2Fimg.pconline.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639668816&t=0bd6f2b4ac0594705b76eb569ee76026" alt="">
              </div>
              <!-- 文字区 -->
              <div class="like_text">
                  <div class="like_title">
                      金海湖风景区
                  </div>
                  <div class="like_message">
                      1341条评论
                  </div>
                  <div class="like_map">
                      <span class="like_mark">￥<b>18.8</b></span>起
                      <span>平谷区</span>
                  </div>
              </div>
          </li>
          <li class="like_item border-bottom">
              <!-- 图片区 -->
              <div class="like_img">
                  <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.pconline.com.cn%2Fimages%2Fupload%2Fupc%2Ftx%2Fphotoblog%2F1312%2F29%2Fc3%2F30107830_1388306674126.jpg&refer=http%3A%2F%2Fimg.pconline.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639668816&t=0bd6f2b4ac0594705b76eb569ee76026" alt="">
              </div>
              <!-- 文字区 -->
              <div class="like_text">
                  <div class="like_title">
                      金海湖风景区
                  </div>
                  <div class="like_message">
                      1341条评论
                  </div>
                  <div class="like_map">
                      <span class="like_mark">￥<b>18.8</b></span>起
                      <span>平谷区</span>
                  </div>
              </div>
          </li>
          <li class="like_item border-bottom">
              <!-- 图片区 -->
              <div class="like_img">
                  <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.pconline.com.cn%2Fimages%2Fupload%2Fupc%2Ftx%2Fphotoblog%2F1312%2F29%2Fc3%2F30107830_1388306674126.jpg&refer=http%3A%2F%2Fimg.pconline.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639668816&t=0bd6f2b4ac0594705b76eb569ee76026" alt="">
              </div>
              <!-- 文字区 -->
              <div class="like_text">
                  <div class="like_title">
                      金海湖风景区
                  </div>
                  <div class="like_message">
                      1341条评论
                  </div>
                  <div class="like_map">
                      <span class="like_mark">￥<b>18.8</b></span>起
                      <span>平谷区</span>
                  </div>
              </div>
          </li>
          <li class="like_item border-bottom">
              <!-- 图片区 -->
              <div class="like_img">
                  <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.pconline.com.cn%2Fimages%2Fupload%2Fupc%2Ftx%2Fphotoblog%2F1312%2F29%2Fc3%2F30107830_1388306674126.jpg&refer=http%3A%2F%2Fimg.pconline.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639668816&t=0bd6f2b4ac0594705b76eb569ee76026" alt="">
              </div>
              <!-- 文字区 -->
              <div class="like_text">
                  <div class="like_title">
                      金海湖风景区
                  </div>
                  <div class="like_message">
                      1341条评论
                  </div>
                  <div class="like_map">
                      <span class="like_mark">￥<b>18.8</b></span>起
                      <span>平谷区</span>
                  </div>
              </div>
          </li>
          <li class="like_item border-bottom">
              <!-- 图片区 -->
              <div class="like_img">
                  <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.pconline.com.cn%2Fimages%2Fupload%2Fupc%2Ftx%2Fphotoblog%2F1312%2F29%2Fc3%2F30107830_1388306674126.jpg&refer=http%3A%2F%2Fimg.pconline.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639668816&t=0bd6f2b4ac0594705b76eb569ee76026" alt="">
              </div>
              <!-- 文字区 -->
              <div class="like_text">
                  <div class="like_title">
                      金海湖风景区
                  </div>
                  <div class="like_message">
                      1341条评论
                  </div>
                  <div class="like_map">
                      <span class="like_mark">￥<b>18.8</b></span>起
                      <span>平谷区</span>
                  </div>
              </div>
          </li>
          <li class="like_item border-bottom">
              <!-- 图片区 -->
              <div class="like_img">
                  <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.pconline.com.cn%2Fimages%2Fupload%2Fupc%2Ftx%2Fphotoblog%2F1312%2F29%2Fc3%2F30107830_1388306674126.jpg&refer=http%3A%2F%2Fimg.pconline.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639668816&t=0bd6f2b4ac0594705b76eb569ee76026" alt="">
              </div>
              <!-- 文字区 -->
              <div class="like_text">
                  <div class="like_title">
                      金海湖风景区
                  </div>
                  <div class="like_message">
                      1341条评论
                  </div>
                  <div class="like_map">
                      <span class="like_mark">￥<b>18.8</b></span>起
                      <span>平谷区</span>
                  </div>
              </div>
          </li>
          <li class="like_item border-bottom">
              <!-- 图片区 -->
              <div class="like_img">
                  <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.pconline.com.cn%2Fimages%2Fupload%2Fupc%2Ftx%2Fphotoblog%2F1312%2F29%2Fc3%2F30107830_1388306674126.jpg&refer=http%3A%2F%2Fimg.pconline.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639668816&t=0bd6f2b4ac0594705b76eb569ee76026" alt="">
              </div>
              <!-- 文字区 -->
              <div class="like_text">
                  <div class="like_title">
                      金海湖风景区
                  </div>
                  <div class="like_message">
                      1341条评论
                  </div>
                  <div class="like_map">
                      <span class="like_mark">￥<b>18.8</b></span>起
                      <span>平谷区</span>
                  </div>
              </div>
          </li>
          <li class="like_item border-bottom">
              <!-- 图片区 -->
              <div class="like_img">
                  <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.pconline.com.cn%2Fimages%2Fupload%2Fupc%2Ftx%2Fphotoblog%2F1312%2F29%2Fc3%2F30107830_1388306674126.jpg&refer=http%3A%2F%2Fimg.pconline.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639668816&t=0bd6f2b4ac0594705b76eb569ee76026" alt="">
              </div>
              <!-- 文字区 -->
              <div class="like_text">
                  <div class="like_title">
                      金海湖风景区
                  </div>
                  <div class="like_message">
                      1341条评论
                  </div>
                  <div class="like_map">
                      <span class="like_mark">￥<b>18.8</b></span>起
                      <span>平谷区</span>
                  </div>
              </div>
          </li>
          <li class="like_item border-bottom">
              <!-- 图片区 -->
              <div class="like_img">
                  <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.pconline.com.cn%2Fimages%2Fupload%2Fupc%2Ftx%2Fphotoblog%2F1312%2F29%2Fc3%2F30107830_1388306674126.jpg&refer=http%3A%2F%2Fimg.pconline.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639668816&t=0bd6f2b4ac0594705b76eb569ee76026" alt="">
              </div>
              <!-- 文字区 -->
              <div class="like_text">
                  <div class="like_title">
                      金海湖风景区
                  </div>
                  <div class="like_message">
                      1341条评论
                  </div>
                  <div class="like_map">
                      <span class="like_mark">￥<b>18.8</b></span>起
                      <span>平谷区</span>
                  </div>
              </div>
          </li>
          <li class="like_item border-bottom">
              <!-- 图片区 -->
              <div class="like_img">
                  <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.pconline.com.cn%2Fimages%2Fupload%2Fupc%2Ftx%2Fphotoblog%2F1312%2F29%2Fc3%2F30107830_1388306674126.jpg&refer=http%3A%2F%2Fimg.pconline.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639668816&t=0bd6f2b4ac0594705b76eb569ee76026" alt="">
              </div>
              <!-- 文字区 -->
              <div class="like_text">
                  <div class="like_title">
                      金海湖风景区
                  </div>
                  <div class="like_message">
                      1341条评论
                  </div>
                  <div class="like_map">
                      <span class="like_mark">￥<b>18.8</b></span>起
                      <span>平谷区</span>
                  </div>
              </div>
          </li>
          <li class="like_item border-bottom">
              <!-- 图片区 -->
              <div class="like_img">
                  <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.pconline.com.cn%2Fimages%2Fupload%2Fupc%2Ftx%2Fphotoblog%2F1312%2F29%2Fc3%2F30107830_1388306674126.jpg&refer=http%3A%2F%2Fimg.pconline.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639668816&t=0bd6f2b4ac0594705b76eb569ee76026" alt="">
              </div>
              <!-- 文字区 -->
              <div class="like_text">
                  <div class="like_title">
                      金海湖风景区
                  </div>
                  <div class="like_message">
                      1341条评论
                  </div>
                  <div class="like_map">
                      <span class="like_mark">￥<b>18.8</b></span>起
                      <span>平谷区</span>
                  </div>
              </div>
          </li>
          <li class="like_item border-bottom">
              <!-- 图片区 -->
              <div class="like_img">
                  <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.pconline.com.cn%2Fimages%2Fupload%2Fupc%2Ftx%2Fphotoblog%2F1312%2F29%2Fc3%2F30107830_1388306674126.jpg&refer=http%3A%2F%2Fimg.pconline.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639668816&t=0bd6f2b4ac0594705b76eb569ee76026" alt="">
              </div>
              <!-- 文字区 -->
              <div class="like_text">
                  <div class="like_title">
                      金海湖风景区
                  </div>
                  <div class="like_message">
                      1341条评论
                  </div>
                  <div class="like_map">
                      <span class="like_mark">￥<b>18.8</b></span>起
                      <span>平谷区</span>
                  </div>
              </div>
          </li>
          <li class="like_item border-bottom">
              <!-- 图片区 -->
              <div class="like_img">
                  <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.pconline.com.cn%2Fimages%2Fupload%2Fupc%2Ftx%2Fphotoblog%2F1312%2F29%2Fc3%2F30107830_1388306674126.jpg&refer=http%3A%2F%2Fimg.pconline.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639668816&t=0bd6f2b4ac0594705b76eb569ee76026" alt="">
              </div>
              <!-- 文字区 -->
              <div class="like_text">
                  <div class="like_title">
                      金海湖风景区
                  </div>
                  <div class="like_message">
                      1341条评论
                  </div>
                  <div class="like_map">
                      <span class="like_mark">￥<b>18.8</b></span>起
                      <span>平谷区</span>
                  </div>
              </div>
          </li>
          <li class="like_item border-bottom">
              <!-- 图片区 -->
              <div class="like_img">
                  <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.pconline.com.cn%2Fimages%2Fupload%2Fupc%2Ftx%2Fphotoblog%2F1312%2F29%2Fc3%2F30107830_1388306674126.jpg&refer=http%3A%2F%2Fimg.pconline.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639668816&t=0bd6f2b4ac0594705b76eb569ee76026" alt="">
              </div>
              <!-- 文字区 -->
              <div class="like_text">
                  <div class="like_title">
                      金海湖风景区
                  </div>
                  <div class="like_message">
                      1341条评论
                  </div>
                  <div class="like_map">
                      <span class="like_mark">￥<b>18.8</b></span>起
                      <span>平谷区</span>
                  </div>
              </div>
          </li>
          <li class="like_item border-bottom">
              <!-- 图片区 -->
              <div class="like_img">
                  <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.pconline.com.cn%2Fimages%2Fupload%2Fupc%2Ftx%2Fphotoblog%2F1312%2F29%2Fc3%2F30107830_1388306674126.jpg&refer=http%3A%2F%2Fimg.pconline.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639668816&t=0bd6f2b4ac0594705b76eb569ee76026" alt="">
              </div>
              <!-- 文字区 -->
              <div class="like_text">
                  <div class="like_title">
                      金海湖风景区
                  </div>
                  <div class="like_message">
                      1341条评论
                  </div>
                  <div class="like_map">
                      <span class="like_mark">￥<b>18.8</b></span>起
                      <span>平谷区</span>
                  </div>
              </div>
          </li>
          
      </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
    };
  },

  components: {},

  computed: {},

  mounted: {},

  methods: {}
}

</script>
<style lang='less' scoped>
  .like_container{
      margin-top: .2rem;
      background-color: #fff;
      font-size: .28rem;
      line-height: .28rem;
      padding: 0 .2rem;
  }
  .like_item{
      position: relative;
      overflow: hidden;
      margin-top: .15rem;
  }
  .like_img {
      float: left;
      img{
          width: 2rem;
          height: 2rem;
      }
  }
  .like_text{
    padding-left: .22rem;
    overflow: hidden;
    .like_title{
        font-size: .32rem;
        color:#212121;
        margin-top: .4rem;
    }
    .like_message{
        margin-top:.3rem;
        color: #616161;
        font-size: .16rem;
    }
    .like_map{
        margin-top:.3rem;
        color: #616161;
        position: relative;
        .like_mark{
            color:#ff8300;
            b{
                font-size: .35rem;
            }
        }
    }
    .like_map span:nth-child(2){
        position: absolute;
        right: .2rem;
        font-size: .2rem;
    }
  }
</style>